<template>
  <div>
    <div class="header">
      <h1 class="logo">
        <img
          src="https://staticssl.kugou.com/public/root/images/logo.png"
          alt=""
        />
      </h1>
      <div class="search">
        <div class="search_input">
          <input type="text" v-model="search_text" @keyup.enter="toSearch" />
          <div class="searh_btn">
            <i class="iconfont icon-sousuo" @click="toSearch"></i>
          </div>
        </div>
      </div>
      <div class="topNav">
        <ul>
          <li>客服中心</li>
          <li>招贤纳士</li>
          <li>会员中心</li>
          <li>商务合作</li>
        </ul>
      </div>
      <button class="btn" @click="navigateTo('/login')" v-if="!nickname">
        登录
      </button>
      <span v-if="nickname" class="nickname">{{ nickname }}</span>
      <button class="btn-logout" @click="logout" v-if="nickname">注销</button>
    </div>
    <div class="nav">
      <ul class="navList" @click="changeColor">
        <li
          :class="changeColorIndex === 1 ? 'active' : ''"
          data-index="1"
          @click="navigateTo('/')"
        >
          首页
        </li>
        <li
          :class="changeColorIndex === 2 ? 'active' : ''"
          data-index="2"
          @click="navigateTo('/ranking')"
        >
          榜单
        </li>
        <li :class="changeColorIndex === 3 ? 'active' : ''" data-index="3">
          听书
        </li>
        <li
          :class="changeColorIndex === 4 ? 'active' : ''"
          data-index="4"
          @click="navigateTo('/radio')"
        >
          电台
        </li>
        <li
          :class="changeColorIndex === 5 ? 'active' : ''"
          data-index="5"
          @click="navigateTo('/playList')"
        >
          歌单
        </li>
        <li>今日头条</li>
        <li>下载</li>
        <li>关于我们</li>
        <li class="more">
          更多
        </li>
      </ul>
    </div>
  </div>
</template>


<script>
import { gfRequest } from "../../utils/gfRequest";
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "Header",
  data() {
    return {
      changeColorIndex: 1,
      search_text: "",
      nickname: "",
    };
  },
  methods: {
    ...mapMutations("search", ["UPDATESEARCHTEXT"]),
    ...mapActions("search", ["getMusicList"]),
    changeColor(e) {
      this.changeColorIndex = +e.target.dataset.index || 1;
    },
    navigateTo(path) {
      if (this.$route.path === path) return;
      this.$router.push({ path });
    },
    toSearch() {
      const search_text = this.search_text.trim();
      this.UPDATESEARCHTEXT(search_text);
      this.getMusicList(`/search?keywords=${search_text || "许嵩"}&limit=20`);

      //先判断下是不是在搜索页面，如果在，就不用跳转
      if (this.$route.path === "/search") return;

      this.$router.push({
        name: "Search",
      });
    },
    async logout() {
      await gfRequest("/logout");
      localStorage.removeItem("nickname");
      this.nickname = "";
    },
  },
  computed: {
    ...mapState("search", ["searchText"]),
  },
  watch: {
    searchText(newValue) {
      this.search_text = newValue;
    },
  },
  mounted() {
    const nickname = localStorage.getItem("nickname");
    this.nickname = nickname;
  },
};
</script>


<style scoped>
/* 头部 */
.header {
  width: 1000px;
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.header .logo {
  vertical-align: center;
  height: 37px;
}
.header .search {
  margin-left: 30px;
}
.header .search .search_input {
  width: 298px;
  height: 34px;
  border: 1px solid #ccc;
  line-height: 34px;
}
.header .search .search_input input {
  width: 249px;
  /* height: 24px; */
  /* line-height: 24px; */
  border: none;
  outline: medium;
  margin-left: 14px;
  padding: 5px 0;
  color: #666;
}
.header .search .search_input .searh_btn {
  width: 34px;
  height: 34px;
  text-align: center;
  display: inline-block;
  /* margin: 0; */
  border: none;
  /* padding: 0; */
  /* outline: none; */
  cursor: pointer;
}
.header .topNav {
  font-size: 16px;
  padding-left: 10px;
}
.header .topNav ul {
  display: flex;
}
.header .topNav ul li {
  width: 52px;
  padding: 0 10px;
  list-style: none;
  color: #777;
  font-size: 13px;
}

.header .topNav ul li:last-child {
  border-right: 1px solid #777;
  padding-right: 25px;
}
.header .btn {
  width: 50px;
  height: 30px;
  border: 1px solid #169af3;
  background-color: #169af3;
  border-radius: 2px;
  font-size: 16px;
  color: white;
  margin-left: 30px;
}
.header .btn-logout {
  width: 50px;
  height: 30px;
  border: none;
  background-color: #eb2503;
  color: #fff;
  border-radius: 5px;
}
.header .nickname {
  /* width: 75px; */
  flex-grow: 1;
  padding: 0 10px 0 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: #777;
  text-align: center;
}
/* 导航栏 */
.nav {
  width: 100%;
  height: 55px;
  background-color: #2c323b;
}
.navList {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  font-size: 16px;
  color: #ddd;
  line-height: 55px;
}
.navList li {
  padding: 0 20px;
  list-style: none;
  text-align: center;
}
.navList li:hover {
  background-color: #0c8ed9;
}
.navList li.active {
  background-color: #0c8ed9;
}

</style>

